<template>
    <el-main>
        <!-- 条件查询 -->
        <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="resetSearchForm()">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="$hasPermission('sys:department:add')">新增</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%;margin-bottom:20px;" row-key="id" border stripe default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="departmentName" label="部门名称"></el-table-column>
            <el-table-column prop="parentName" label="所属部门"></el-table-column>
            <el-table-column prop="phone" label="部门电话"></el-table-column>
            <el-table-column prop="address" label="部门地址"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit-outline" size="mini"
                        @click="handleEdit(scope.row)" v-if="$hasPermission('sys:department:edit')">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete-solid" size="mini"
                        @click="handleDelete(scope.row)" v-if="$hasPermission('sys:department:delete')">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <system-dialog :title="deptDialog.title" :visible="deptDialog.visible" :width="deptDialog.width"
            :height="deptDialog.height" @onClose="onClose()" @onConfirm="onConfirm">
            <div slot="content">
                <el-form :model="dept" ref="deptForm" :rules="rules" label-width="80px" :inline="true" size="small">
                    <el-form-item label="所属部门" prop="parentName">
                        <el-input v-model="dept.parentName" :readonly="true"
                            @click.native="openSelectDeptWindow()"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="departmentName">
                        <el-input v-model="dept.departmentName"></el-input>
                    </el-form-item>
                    <el-form-item label="部门电话">
                        <el-input v-model="dept.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="部门地址">
                        <el-input v-model="dept.address"></el-input>
                    </el-form-item>
                    <el-form-item label="序号">
                        <el-input v-model="dept.orderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </system-dialog>

        <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
            :height="parentDialog.height" @onClose="onParentClose()" @onConfirm="onParentConfirm()">
            <div slot="content">
                <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps" empty-text="暂无数据"
                    :highlight-current="true" :default-expand-all="true" :expand-on-click-node="false"
                    @node-click="handleNodeClick">
                    <div class="customer-tree-node" slot-scope="{node, data}">
                        <span v-if="data.children.length === 0">
                            <i class="el-icon-document"></i>
                        </span>
                        <span v-else @click.stop="changeIcon(data)">
                            <svg-icon v-if="data.open" icon-class="add-s"></svg-icon>
                            <svg-icon v-else icon-class="sub-s"></svg-icon>
                        </span>
                        <span style="margin-left: 3px;">{{ node.label }}</span>
                    </div>
                </el-tree>
            </div>
        </system-dialog>
    </el-main>
</template>

<script>
import departmentApi from '@/api/department'
import SystemDialog from '@/components/system/SystemDialog.vue'

export default {
    name: "department",
    components: {
        SystemDialog
    },
    data() {
        return {
            searchModel: {
                departmentName: "", // 部门名称
            },
            tableData: [], // 表格数据
            deptDialog: {
                title: "新增窗口",
                visible: false,
                width: 560,
                height: 170,
                type: "add"
            },
            dept: {
                id: "",
                departmentName: "",
                pid: "",
                parentName: "",
                phone: "",
                address: "",
                orderNum: "",
            },
            rules: {
                parentName: [{ required: true, message: "请选择所属部门", trigger: "change" }],
                departmentName: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
            },
            parentDialog: {
                title: "选择所属部门",
                visible: false,
                width: 300,
                height: 400
            },
            treeList: [],
            defaultProps: {
                children: "children",
                label: "departmentName"
            }
        }
    },
    created() {
        this.search()
    },
    methods: {
        async search() {
            let res = await departmentApi.getDepartmentList(this.searchModel)
            if (res.success) {
                this.tableData = res.data
            }
        },
        openAddWindow() {
            this.$resetForm("deptForm", this.dept)
            this.deptDialog.title = "新增部门"
            this.deptDialog.type = "add"
            this.deptDialog.visible = true
        },
        onClose() {
            this.deptDialog.visible = false
        },
        onConfirm() {
            if (this.deptDialog.type === "add") {
                this.$refs.deptForm.validate(async (valid) => {
                    if (valid) {

                        let res = await departmentApi.addDept(this.dept)

                        if (res.success) {
                            this.$message.success(res.message)
                            this.search()
                            this.deptDialog.visible = false
                        } else {
                            this.$message.error(res.message)
                        }
                    }
                })
            } else if (this.deptDialog.type === "edit") {
                this.$refs.deptForm.validate(async (valid) => {
                    if (valid) {

                        let res = await departmentApi.editDept(this.dept)

                        if (res.success) {
                            this.$message.success(res.message)
                            this.search()
                            this.deptDialog.visible = false
                        } else {
                            this.$message.error(res.message)
                        }
                    }
                })
            }
        },
        async openSelectDeptWindow() {
            this.parentDialog.visible = true

            let res = await departmentApi.getParentTreeList()

            if (res.success) {
                this.treeList = res.data
            }
        },
        changeIcon(data) {
            data.open = !data.open
            this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
        },
        handleNodeClick(data) {
            this.dept.pid = data.id
            this.dept.parentName = data.departmentName
        },
        onParentClose() {
            this.parentDialog.visible = false
        },
        onParentConfirm() {
            this.parentDialog.visible = false
        },
        handleEdit(row) {
            this.$objCopy(row, this.dept)
            this.deptDialog.title = "编辑部门"
            this.deptDialog.type = "edit"
            this.deptDialog.visible = true
        },
        async handleDelete(row) {
            let resCheck = await departmentApi.checkDepartment({ id: row.id })
            if (!resCheck.success) {
                this.$message.warning(resCheck.message)
            } else {
                let confirm = await this.$myconfirm("确定要删除该数据吗?")
                if (confirm) {
                    let res = await departmentApi.deleteById({ id: row.id })
                    if (res.success) {
                        this.$message.success(res.message)
                        this.search()
                    } else {
                        this.$message.error(res.message)
                    }
                }
            }
        },
        resetSearchForm() {
            this.searchModel.departmentName = ''
            this.search()
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
    .el-tree-node {
        position: relative;
        padding-left: 10px;
    }

    .el-tree-node__children {
        padding-left: 20px;
    }

    .el-tree-node :last-child::before {
        height: 40px;
    }

    .el-tree>.el-tree-node::before {
        border-left: none;
    }

    .el-tree>.el-tree-node::after {
        border-top: none;
    }

    .el-tree-node::before,
    .el-tree-node::after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree :first-child .el-tree-node::before {
        border-left: none;
    }

    .el-tree-node::before {
        border-left: 1px dotted #d9d9d9;
        bottom: 0px;
        height: 100%;
        top: -25px;
        width: 24px;
    }

    .el-tree-node__expand-icon.is-leaf {
        width: 8px;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        display: none;
    }

    .el-tree-node__content {
        line-height: 30px;
        height: 30px;
        padding-left: 10px !important;
    }
}

::v-deep .el-tree>div {
    &::before {
        display: none;
    }

    &::after {
        display: none;
    }
}
</style>